1 00:00:00,840 --> 00:00:03,470 Hello and welcome to this lecture. 2 00:00:03,660 --> 00:00:12,470 In this show we will be creating the structure for the up using hastier mail. 3 00:00:13,830 --> 00:00:15,400 Okay. 4 00:00:15,990 --> 00:00:25,080 In my history document and I have already added some basic hastey on Health tags. 5 00:00:25,080 --> 00:00:30,930 These are common tags that you will find in every web application. 6 00:00:31,230 --> 00:00:41,700 So consist of the doctype online one which is used to have to instruct the web browsers that the information 7 00:00:41,700 --> 00:00:43,940 contained in the paper. 8 00:00:44,010 --> 00:00:47,300 Trying to view is hastier mail. 9 00:00:47,610 --> 00:00:53,570 So the ashfall is here mail is from line 2 to 15. 10 00:00:53,580 --> 00:01:02,350 So any content between line two and 15 will be regarded as the CML content. 11 00:01:04,530 --> 00:01:16,880 I have added some new code from line for 2 line 9 saw line for here we called the Mer tag. 12 00:01:17,070 --> 00:01:25,400 We've got a few of them all got messed up can't set the Met a cast set is used to define the encoding 13 00:01:25,440 --> 00:01:30,880 type character types for this document and the standard is utf. 14 00:01:30,930 --> 00:01:32,170 Dash 8. 15 00:01:32,610 --> 00:01:39,440 So the card set is the attribute you hear that it is the value. 16 00:01:39,450 --> 00:01:48,630 So that's the encode tag line 5 here with quite a title line 6 we've got mad men to tag metal tags. 17 00:01:48,640 --> 00:02:00,720 Basically I used to provide extra description to the CML document so I got a name here online 6 name 18 00:02:00,780 --> 00:02:09,450 attribute with a value of description and then we've gotten basically murder tags I use to assist the 19 00:02:09,450 --> 00:02:17,300 search engines in providing information so when the search engine and browse is all goes to a website 20 00:02:17,820 --> 00:02:25,140 they go for the head section and look for any information they can find relating to the information 21 00:02:25,140 --> 00:02:29,500 that has been requested for small metal tags. 22 00:02:29,550 --> 00:02:33,740 They are for information purposes. 23 00:02:34,100 --> 00:02:37,330 Line 6 here. 24 00:02:37,580 --> 00:02:45,030 Just change that too. 25 00:02:46,060 --> 00:02:53,490 OK so again as Line 6 I've got two attributes one is a name which gives the description and their lives 26 00:02:53,540 --> 00:03:00,480 in content and the value is changed background collomb say again providing enough information in the 27 00:03:00,480 --> 00:03:08,330 head section to assist the search engines line 7 is another matter. 28 00:03:08,400 --> 00:03:20,160 Tag name was viewport the viewport basically allows this document to be viewed on any device regardless 29 00:03:20,220 --> 00:03:21,620 of the screen size. 30 00:03:21,870 --> 00:03:28,940 So their view board means it will fit automatically to any screen size. 31 00:03:29,040 --> 00:03:36,240 So that's what I've defined here and I'm giving it an initial zone of due course to one. 32 00:03:36,240 --> 00:03:37,400 All right so that's. 33 00:03:37,410 --> 00:03:44,790 Where you see the viewport and the scale is all set up so that the page can be viewed by any device 34 00:03:45,340 --> 00:03:46,550 lines. 35 00:03:46,640 --> 00:03:55,820 8 I have added a link to the query library which is a javascript library. 36 00:03:55,910 --> 00:04:00,770 Toby is in query for the javascript part of the project. 37 00:04:00,990 --> 00:04:08,490 The J query we are accessing it from the go go see the in C the end stand for content delivering that 38 00:04:08,490 --> 00:04:09,420 work. 39 00:04:09,450 --> 00:04:15,900 This is advantageous because we don't need to install it on our computer we just reference it via the 40 00:04:15,900 --> 00:04:16,620 link. 41 00:04:16,740 --> 00:04:21,760 We don't need to do any of those or anything we want Google to clear all of that. 42 00:04:21,780 --> 00:04:26,870 All we need to do is reference it via a link line 9. 43 00:04:26,880 --> 00:04:29,630 I've attached a link to our style sheet. 44 00:04:29,640 --> 00:04:35,510 We see the starship we create here the blank one but will be populating it in our stylin. 45 00:04:35,520 --> 00:04:41,840 When we're doing the session style it so that's fit for the head section. 46 00:04:42,970 --> 00:04:50,320 Okay I have added some code here to the body section. 47 00:04:50,580 --> 00:04:59,380 So in between the body tags they are the content that you can naturally see the content in the head 48 00:04:59,380 --> 00:05:07,120 section is not visible to the content you can see is the content between the body tags so like 15 there. 49 00:05:07,130 --> 00:05:14,930 I've attached a DVD car like is used to divide the section off a page so it's like a section. 50 00:05:15,300 --> 00:05:17,750 I'm giving it an idea of wrapper. 51 00:05:18,090 --> 00:05:22,550 Well you will be using this later in style in the day. 52 00:05:22,920 --> 00:05:24,530 Have also attached. 53 00:05:24,540 --> 00:05:34,110 Hey one have nested Hey one tag inside the dip just to give it a bit of text heading online. 54 00:05:34,130 --> 00:05:35,400 Hey team. 55 00:05:35,590 --> 00:05:39,530 Have added an import button. 56 00:05:39,930 --> 00:05:48,920 Okay so this is a button that will be clicked so when it is clicked it all changed to call off the box. 57 00:05:48,930 --> 00:05:59,460 I've also given it an idea of change column or use this I.D. attribute later for styling lying 21. 58 00:05:59,460 --> 00:06:02,590 I have included a reference to. 59 00:06:02,720 --> 00:06:10,150 Javascript file which is here the one we created earlier so that is a reference to all the. 60 00:06:10,200 --> 00:06:10,810 Query. 61 00:06:10,940 --> 00:06:12,210 Joe query. 62 00:06:12,360 --> 00:06:18,650 All right will be inside there's javascript far more reference that true this link here. 63 00:06:18,930 --> 00:06:22,450 So that is it for the structure. 64 00:06:22,740 --> 00:06:30,540 If I say that we have a look you can see what the page looks like at the moment. 65 00:06:30,840 --> 00:06:34,590 So this is what the page looks like. 66 00:06:34,670 --> 00:06:38,070 This is the button we created and this is the text. 67 00:06:38,210 --> 00:06:39,930 The DVR is not defined yet. 68 00:06:39,930 --> 00:06:44,080 We're going to define that using csx. 69 00:06:44,130 --> 00:06:45,570 Thanks for watching. 70 00:06:45,570 --> 00:06:46,860 Bye for now.